<template>
	<text :class="[prefixClass, 'icon-' + name]" :style="setStyle" @tap="clickIcon"></text>
</template>

<script setup>
import { ref, computed } from 'vue'

const emit = defineEmits(['click'])

const props = defineProps({
	prefixClass: {
		type: String,
		default: 'my-icon'
	},
	name: {
		type: String,
		default: ''
	},
	size: {
		type: [Number, String],
		default: 32
	},
	color: {
		type: String,
		default: '#82848a'
	},
	margin: {
		type: String,
		default: '0'
	}
})

const setStyle = computed(() => {
	return `color:${props.color};font-size:${props.size}px;line-height:${props.size}px;margin:${props.margin}`
})

const clickIcon = e => {
	emit('click', e)
}
</script>

<style>
@font-face {
	font-family: 'myicons';
	/* Project id 3184451 */
	src: url('//at.alicdn.com/t/font_3184451_w892282fya.woff2?t=1648004394954') format('woff2'),
		url('//at.alicdn.com/t/font_3184451_w892282fya.woff?t=1648004394954') format('woff'),
		url('//at.alicdn.com/t/font_3184451_w892282fya.ttf?t=1648004394954') format('truetype');
}

.my-icon {
	font-family: 'myicons' !important;
	display: inline-block;
	font-style: normal;
	font-weight: 400;
	font-variant: normal;
	text-transform: none;
	text-rendering: auto;
	text-align: center;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	vertical-align: middle;
}

.icon-pwd:before {
	content: '\e601';
}

.icon-user:before {
	content: '\e648';
}

.icon-diaobo:before {
	content: '\e6a4';
}

.icon-peijian:before {
	content: '\e933';
}

.icon-home:before {
	content: '\e639';
}

.icon-dizhi:before {
	content: '\e63f';
}

.icon-shenhe1:before {
	content: '\e603';
}

.icon-xiugaimima:before {
	content: '\e637';
}

.icon-saoma1:before {
	content: '\e60d';
}

.icon-fenlei:before {
	content: '\e600';
}

.icon-caigou:before {
	content: '\e605';
}

.icon-caiwu:before {
	content: '\e60f';
}

.icon-saoma:before {
	content: '\e749';
}

.icon-my:before {
	content: '\e602';
}

.icon-qiehuan:before {
	content: '\e629';
}

.icon-caiwu1:before {
	content: '\e67a';
}

.icon-liebiao:before {
	content: '\e62d';
}

.icon-zengjia:before {
	content: '\e889';
}

.icon-tuichu:before {
	content: '\e892';
}

.icon-qiehuan1:before {
	content: '\e8a8';
}

.icon-tuichu1:before {
	content: '\e67d';
}

.icon-diaobodan:before {
	content: '\e675';
}

.icon-guanli:before {
	content: '\eb8f';
}

.icon-shebeiguanli:before {
	content: '\ebb7';
}

.icon-arrow-right:before {
	content: '\eb03';
}

.icon-arrow_up:before {
	content: '\eb04';
}

.icon-arrow_left:before {
	content: '\eb05';
}

.icon-arrow_down:before {
	content: '\eb06';
}

.icon-tongzhi:before {
	content: '\e61d';
}

.icon-liebiao1:before {
	content: '\ec6b';
}

.icon-peijianguanli:before {
	content: '\e62c';
}

.icon-saoma2:before {
	content: '\e60e';
}

.icon-shenhe2:before {
	content: '\e800';
}

.icon-jiamengshang:before {
	content: '\e60b';
}

.icon-shenhe:before {
	content: '\e6a1';
}

.icon-guanli1:before {
	content: '\e62a';
}

.icon-peijiancaigou:before {
	content: '\e682';
}

.icon-zengjia1:before {
	content: '\e8c0';
}

.icon-about:before {
	content: '\e69a';
}

.icon-wuliu:before {
	content: '\e607';
}

.icon-dailishang:before {
	content: '\e651';
}
</style>
